<template>
	<div class="breadCrumbWrap">
        <el-breadcrumb separator="/">
			<el-breadcrumb-item class="index" @click="toIndex">首页</el-breadcrumb-item>
			<template v-for="(item,index) in breadcrumbArr" :key="index">
				<el-breadcrumb-item v-if="typeof item.sideBarName != 'undefined'">
					{{item.sideBarName}}
				</el-breadcrumb-item>
			</template>
		</el-breadcrumb>
	</div>
</template>
<script type="text/javascript">
	import useRoute  from '@/store/route.js'
	import { mapState,mapActions } from 'pinia';
	export default{
		data () {
			return {
				nowPageName:"",
				routeConfigArr:[],
				breadcrumbArr:[]
			}
		},
		created(){
			this.$mitt.on("sideBarClick",this.getPageName);
        	this.$mitt.on("tagClick",this.getPageName);
			this.routeConfigArr = this.routeConfig;
		},
		destroyed() {
			this.$mitt.all.clear();
		},
		computed: {
			...mapState(useRoute, ['routeConfig','nowItem'])
		},
		mounted (){
			this.getPageName()
        },
		components : {
			
		},
		methods : {
			getPageName(){
				if(typeof this.nowItem.detailName == 'undefined'){
					let routePath = this.nowItem.path;
					this.breadcrumbArr = this.$util.findParent(routePath,this.routeConfigArr);
				}else{
					let onlyPageRouter = this.$util.onlyPageObj(this.$util.treeToArray(this.routeConfigArr));
					let routePath = onlyPageRouter[this.nowItem.belongTo].path;
					this.breadcrumbArr = this.$util.findParent(routePath,this.routeConfigArr);
					this.detailPageName();
				}
			},
			detailPageName(){
				let isExist = false;
				let detailName = this.nowItem.detailName;
				for(let i = 0; i< this.breadcrumbArr.length;i++){
					var item = this.breadcrumbArr[i];
					if(item.sideBarName == detailName){
						isExist = true;
					}
					if(typeof item.path == 'undefined'){
						this.breadcrumbArr.splice(i,1,{})
					}
				}
				var params = {
					sideBarName:detailName
				}
				this.breadcrumbArr.push(params);
			},
			toIndex(){
				this.$mitt.emit("tagClick",{path:"/index"});
			}
		}
	}
</script>
<style type="text/css" lang="less">
	.breadCrumbWrap{
		height:100%;
		span{
			line-height:60px
		}
		.index{
			cursor:pointer;
			font-weight:bold;
		}
    }
</style>